<template>
  <div>
    <div id="printId" ref="printMe">
      <div class="printTable" style="page-break-after:always; margin-bottom: 20px;" v-for="(item, index) in tableHeadList" :key="index">
        <div class="tableHeadUl">
          <div class="title">
            <img :id="'barCode' + index" ref="barCode">
            <b class="b"> 物流管理系统有限公司汽运单</b>
          </div>
          <ul style="left: 0%;">
            <li><b>客户名称</b>：{{ item.receiveGoodsCustomer }}</li>
            <li><b>收货人</b>：{{ item.receiveGoodsPerson }}</li>
            <li><b>车牌号</b>：{{ item.vehicleLicenseNumber }}</li>
            <li><b>司机姓名</b>：{{ item.driverName }}</li>
          </ul>
          <ul class="ul">
            <li class="li1"><b>收货电话</b>：{{ item.receiveGoodsMobile }}</li>
            <li class="li2"><b>收货地址</b>：{{ item.receiveGoodsAddress }}</li>
          </ul>
        </div>
        <!--b> 物流管理系统有限公司汽运单</b>
        <b> 物流管理系统有限公司汽运单</b-->
        <table style="word-break:break-all;word-wrap:break-all;" class="table">
          <tbody>
            <tr>
              <td class="detail" style="min-width:75px">卷号</td>
              <td class="detail" style="min-width:75px">类型</td>
              <td class="detail" style="min-width:75px">材质</td>
              <td class="detail" style="min-width:75px">规格</td>
              <td class="detail" style="min-width:75px">重量(吨)</td>
              <td class="detail" style="min-width:75px">合同号</td>
              <td class="detail" style="min-width:75px">合约号</td>
              <td class="detail" style="min-width:75px">货位</td>

            </tr>
            <tr v-for="(itemData, indexData) in tableDataList[index]" :key="indexData">
              <td>{{ itemData.bundleNumber }}</td>
              <td>{{ itemData.goodsType }}</td>
              <td>{{ itemData.steelGrade }}</td>
              <td>{{ itemData.specification }}</td>
              <td>{{ itemData.weight }}</td>
              <td>{{ itemData.contractNumber }}</td>
              <td>{{ itemData.agreementNumber }}</td>
              <td>{{ itemData.warehouseTotalLocate }}</td>
            </tr>
          </tbody>
        </table>      
        <div class="tableFootUI">
          <ul>
            <li><b>打印时间</b>：{{ dateNow }}</li>
            <li><b>共计</b>：{{ item.freightWeight }}吨&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;<span >{{ item.freightNumber }}件</span></li>
            <li><b>制单人</b>：{{ item.createBy }}</li>
            <li><b>收货人签字</b>：<span style="color:black;">&nbsp;_______________&nbsp;</span></li>
          </ul>
        </div>
        <div class="tableFootUI">
          <span v-if="!item.receiveGoodsRemark && !item.wayBillRemark">
          </span>
          <span v-else>
            <b>备注信息</b>：{{ item.receiveGoodsRemark }}&nbsp;&nbsp;&nbsp;{{ item.wayBillRemark }}
          </span>
        </div>

      </div>
    </div>
    <div class="button">
        <el-button type="primary" icon="el-icon-printer" size="mini" @click="handlePrint">打印</el-button>
    </div>
  </div>
</template>

<script>
import JsBarcode from 'jsbarcode'
import { listGood, getGood, delGood, addGood, updateGood, updateWayBillNumberAndCalculate, getGoodByWayBillNumber } from "@/api/goods/good";

export default {
  name: "Print",
  data() {
    return {
      dateNow: '',
      id: '',
      name: '',
      tableDataList: [], // 表格
      tableHeadList: [], // 信息
      tableFoot: [] // 信息
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.name = this.$route.query.name;
    this.tableHeadList = this.$route.query.list;
    this.getData();
    this.dateNow = this.getDateTime(); //new Date().getTime();
  },
  mounted() {
//    console.log('this.id', this.id);
//    console.log('this.name', this.name);
    let options = {
      format: 'CODE128', //格式
      width: 2, // 条之间宽度
      height: 50, // 高度
      fontSize: 20, // 文本大小
      fontOptions: 'bold', // 字加粗体
      displayValue: true, // 在条形码下方显示文字
      lineColor: '#000', // 线条颜色
      margin: 6 // 条形码周围的空白区域
    }
    this.tableHeadList.forEach((item, index) => {
      let img = this.$refs.barCode[index];
//      console.log('img', img);
      JsBarcode(img, item.wayBillNumber, options);
    })
//    console.log(this.tableHeadList)    
  },
  methods: {
    getDateTime() {
      let date = new Date()
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? '0' + MM : MM
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      let h = date.getHours()
      h = h < 10 ? '0' + h : h
      let m = date.getMinutes()
      m = m < 10 ? '0' + m : m
      let s = date.getSeconds()
      s = s < 10 ? '0' + s : s
      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
    },
    handlePrint() {
//      console.log('handlePrint');
      this.$print(this.$refs.printMe);
    },
    getData(){

    this.tableHeadList.forEach((item, index) => {
      getGoodByWayBillNumber(item.wayBillNumber).then(response => {
        //this.tableDataList[index] = JSON.parse(JSON.stringify(response.data));
        this.tableDataList.push( response.data);
          
//          console.log('response tableDataList', this.tableDataList );
        });
    })
//    console.log(this.tableHeadList)          
    }
  }

};
</script>
<style scoped lang='less'>

#printId {
  font-size: 16px;
  position: relative;
  padding: 10px;
  // margin-bottom: 10px;
  box-sizing: border-box;
  //   height: 500px;
  width: 100%;
}
.printTable {
  width: 900px;
  margin-bottom: 20px;
}
.tableHeadUl {
  width: 100%;
  // margin-top: 5px;
  .title {
    display: flex;
    height: 90px;
    position: relative;
    img {
      float: left;
    }
    .b {
      position: absolute;
      left: 40%;
      font-size: 22px;
      margin-top: 15px;
    }
/*
    .c {
      position: absolute;
      left: 47%;

      font-size: 16px;
      margin-top: 40px;
    }
    ul{
     display: flex;

    }

    #barCode {
      float: left;
    }*/
  }

  ul {
    width: 100%;
    display: flex;
    align-items: left;
    padding: 0 !important;
    justify-content: space-between;
    li {
      list-style: none;
    }
  }
/**/
}
.ul{
  .li1{
    width: 23%;
  }
  .li2{
    width: 57%;
  }
}
.tableFootUI {
  bottom: 10px;
  width: 100%;
  ul {
    width: 100%;
    display: flex;
//    margin: 10 !important;
    padding: 0 !important;
    justify-content: space-between;
    li {
      list-style: none;
    }
  }
}
.button {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
table,
th,
td {
  border: 1px solid blue;
  font-size: 14px;
}
table {
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
}
table {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 10px;
  font-size: 16px;
  td {
    // width: 17%;
    // padding: 4px 4px;
    text-align: center;
    height: 24px;
  }

  .detail {
    font-weight: 700;
    //font-size: 16px;
  }
}
</style>